"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/27
 */
import * as React from 'react'
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";

const {View, ScrollView, ImageBackground, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import SearchBar from "../../component/SearchBar";
import {SCREEN_WIDTH} from "../../constant";
import MyText from "../../component/MyText";
import {placeMembers, PlaceMenus} from "../../assets/data";
import Avatar from "../../component/Avatar";
import Line from "../../component/Line";
import Colors from "../../assets/styles/Colors";

import {PlacePage} from "../../interface/router";
import Request from "../../utils/Request";
import MyImage from "../../component/MyImage";


const {Grid, Card} = require('antd-mobile');

class Page extends React.Component<PlacePage, any> {


    onGridItemPress = (index) => {
        switch (index) {
            case 0:
                Actions.guestRegister();
                return;
            case 1:
                Actions.support();
                return;
            case 2:
                Actions.buildingGuide();
                return;
            case 3:
                Actions.active();
                return;
        }
    };

    render() {
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               title={<SearchBar placeholder='江宏大厦'
                                                 leftIconName={'icon-ditu'}
                                                 rightButtonWidth={0}
                                                 onPress={Actions.search}
                                                 editable={false}/>}
                />
                <View style={commonStyles.flex1}>
                    <ScrollView>
                        <TouchableOpacity onPress={Actions.myPlaceDetail} activeOpacity={1}>
                            <MyImage source={require('../../assets/image/backgroung_one.png')}
                                     style={{width: SCREEN_WIDTH, padding: 20}}>
                                <MyText color={'#fff'} fontSize={25}>欢迎5层166位JIMU的小伙伴加入江宏大厦MarsSpace大家庭！9/27，本周四6pm-7:30pm，新老会员们一起在2层欢聚时光吧</MyText>
                                <View style={[commonStyles.flexRow, {marginTop: 20, alignItems: 'center'}]}>
                                    <Avatar source={{uri: Request.checkImageUrl(this.props.auth.userInfo.avatar)}}/>
                                    <View style={{marginLeft: 10}}>
                                        <MyText color={Colors.White}>{this.props.auth.userInfo.nickName}</MyText>
                                        <MyText color={Colors.SubTitle}>{this.props.auth.userInfo.duty || ''}</MyText>
                                    </View>
                                </View>
                            </MyImage>
                        </TouchableOpacity>
                        <Grid data={PlaceMenus} columnNum={2} renderItem={(item, index) => {
                            return (
                                <TouchableOpacity
                                    style={[commonStyles.flex1, commonStyles.centerVH, {backgroundColor: '#fff'}]}
                                    onPress={this.onGridItemPress.bind(this, index)}>
                                    <Avatar source={item.icon} circle={false} style={{...item.size}}/>
                                    <MyText fontSize={14} color={'#333'} style={{marginTop: 10}}>{item.text}</MyText>
                                </TouchableOpacity>
                            )
                        }}/>
                        <Line height={20} color={'#f4f4f4'}/>
                        <View style={{backgroundColor: '#fff', padding: 20}}>
                            <MyText>社区团队</MyText>
                        </View>
                        <ImageBackground source={require('../../assets/image/background_two.png')}
                                         style={{width: SCREEN_WIDTH}}>
                            <ScrollView horizontal>
                                {placeMembers.map((item, index) => {
                                    return (
                                        <Card key={index} style={{marginVertical: 20, marginLeft: 10}}>
                                            <Card.Body>
                                                <View style={[commonStyles.flex1, commonStyles.centerVH, {
                                                    backgroundColor: '#fff',
                                                    width: autoSize(172.5)
                                                }]}>
                                                    <Avatar source={item.avatar} circle={false} size={autoSize(80)}/>
                                                    <MyText fontSize={14} color={'#333'}
                                                            style={{marginTop: 10}}>{item.name}</MyText>
                                                    <MyText fontSize={14} color={'#333'}
                                                            style={{marginTop: 10}}>{item.position}</MyText>
                                                </View>
                                            </Card.Body>
                                        </Card>
                                    )
                                })}
                            </ScrollView>
                        </ImageBackground>
                    </ScrollView>
                </View>
            </View>
        );
    }
}


export default connect(
    ({auth, place}) => ({auth, place})
)(Page);